<template>
    <div class="title">
        我的考试安排
    </div>
    <template v-for="examInfo in examInfos" :key="Number(examInfo.date)/1000">
        <el-card class="exam-info" style="margin: 10px"
                 v-bind:class="isExamOutOfDate(examInfo) ? 'exam-out-of-date' : 'exam-not-out-of-date'">
            <div class="exam-info-title">
                {{ examInfo?.courseName }}
            </div>
            <div class="exam-info-teacher">
                任课老师：{{ examInfo?.teacherName }}
            </div>
            <div class="exam-info-location">
                考场：{{ examInfo?.campus }}_{{ examInfo?.classroom }}
            </div>
            <div class="exam-info-time">
                考试时间：{{ (timestampToDate(String(Number(examInfo?.date) / 1000))).split(" ")[0] }}
                {{ examInfo?.startTime }} - {{ examInfo?.endTime }}
            </div>
            <div class="exam-info-method">
                考试类型：{{ examInfo?.assessmentMethod }}-{{ examInfo?.method }}
            </div>
            <template v-if="isExamOutOfDate(examInfo)">
                <span class="exam-out-of-date-message">已结束</span>
            </template>
            <template v-else>
                <span class="exam-not-out-of-date-message">{{ getDistanceDays(examInfo) }}</span>
            </template>
        </el-card>
    </template>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getStudentMyExamsArrangement} from "@/service/student/student.service";
import {timestampToDate} from "../../../../util/time.utils";

const examInfos = ref<any[]>([])

onMounted(() => {
    // 获取考试信息
    getStudentMyExamsArrangement((data: any) => {
        let set: any[] = []
        for (const examInfo of data.studentExamArrangementInfoList) {
            set.push(examInfo)
        }
        // 排序考试安排
        set.sort((a: any, b: any) => {
            if (isExamOutOfDate(a)) {
                if (isExamOutOfDate(b)) {
                    return 0
                } else {
                    // 考试a过期，考试b未过期
                    return 1;
                }
            } else {
                if (isExamOutOfDate(b)) {
                    // 考试a未过期，考试b过期
                    return -1;
                }
            }
            return Number(a.date) - Number(b.date);
        })
        for (const examInfo of set) {
            examInfos.value.push(examInfo)
        }
    })
})

/**
 * 判断考试是否过期
 * @param examInfo
 */
function isExamOutOfDate(examInfo: any) {
    return Number(examInfo?.date) / 1000 <= Date.now() / 1000;
}

/**
 * 获取考试距离当前时间的天数
 * @param examInfo
 */
function getDistanceDays(examInfo: any) {
    // 计算两个时间戳之间的毫秒数
    const milliseconds = Number(examInfo?.date) - Date.now() + examInfo?.startTime.split(":")[0] * 60 * 60 * 1000;
    // 将毫秒数转换为天数
    const days = milliseconds / (1000 * 60 * 60 * 24);
    // 向下取整得到整天数
    let day = Math.floor(days);
    let hour = ((days - day) * 24);
    let minute = Math.floor(((hour - Math.floor(hour)) * 60));
    return `距离考试还有${day}天${Math.floor(hour)}小时${minute}分钟`;
}
</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.exam-info-title {
    font-size: 20px;
    font-weight: bold;
}

.exam-not-out-of-date {
    background-color: #d8ffe1;
}

.exam-not-out-of-date-message {
    font-size: 16px;
    display: block;
    text-align: right;
    padding-right: 30px;
    color: #fc4949;
}

.exam-out-of-date {
    color: rgba(0, 0, 0, 0.4);
}

.exam-out-of-date-message {
    font-size: 16px;
    display: block;
    text-align: right;
    padding-right: 30px;
}
</style>